<template>
	<view class="container">
		<image src="../../static/img/jizhang.png" class="jizhang_img" @tap="gojizhang"></image>
		<view class="book_top">
			<view class="top_center">
				<view class="nav book" :class="{'actived':page == 1}">账本</view>
				<view class="nav" :class="{'actived':page == 2}">提现账本</view>
				<view class="nav jizhang" :class="{'actived':page == 3}">记账分析</view>
				<image src="../../static/img/seting_icon.png" class="seting"></image>
			</view>
		</view>
		<!-- 账本 -->
		<view class="book_container" v-if="page == 1">
			<view class="table_book">
				<view class="table_title">
					<view>2022</view>
					<view>异常</view>
					<view>未返</view>
					<view>本金</view>
					<view>佣金</view>
				</view>
				<view class="cuttent_mounth">
					<view class="select">
						<image src="../../static/img/table_left_icon.png"></image>
						<text>本月</text>
						<image src="../../static/img/table_right_icon.png"></image>
					</view>
					<view>0.0</view>
					<view>0.0</view>
					<view>0.0</view>
					<view>0.0</view>
				</view>
				<view class="cuttent_mounth">
					<view class="select">
						<image src="../../static/img/table_left_icon.png"></image>
						<text>今日</text>
						<image src="../../static/img/table_right_icon.png"></image>
					</view>
					<view>0.0</view>
					<view>0.0</view>
					<view>0.0</view>
					<view>0.0</view>
				</view>
			</view>
		
			<view class="filter_container">
				<uni-data-picker placeholder="全部站点" popup-title="请选择站点" :localdata="zhandian" v-model="zhangdian_value"
					@change="zhangdian_change" @nodeclick="onnodeclick" @popupopened="onpopupopened"
					@popupclosed="onpopupclosed">
				</uni-data-picker>
				<uni-data-picker placeholder="返款情况" popup-title="返款情况" :localdata="fankuan" v-model="fankuan_value"
					@change="fankuan_change" @nodeclick="onnodeclick" @popupopened="onpopupopened"
					@popupclosed="onpopupclosed">
				</uni-data-picker>
				<uni-data-picker placeholder="订单状态" popup-title="订单状态" :localdata="dingdan" v-model="dingdan_value"
					@change="dingdan_change" @nodeclick="onnodeclick" @popupopened="onpopupopened"
					@popupclosed="onpopupclosed">
				</uni-data-picker>
				<uni-data-picker placeholder="商城" popup-title="商城" :localdata="plant" v-model="plant_value"
					@change="plant_change" @nodeclick="onnodeclick" @popupopened="onpopupopened"
					@popupclosed="onpopupclosed">
				</uni-data-picker>
				<uni-data-picker placeholder="收款方式" popup-title="收款方式" :localdata="shoukuan" v-model="shoukuan_value"
					@change="shoukuan_change" @nodeclick="onnodeclick" @popupopened="onpopupopened"
					@popupclosed="onpopupclosed">
				</uni-data-picker>
			</view>
		
			<view class="filter_by">
				<view class="by_type">
					<image src="../../static/img/search_icon.png"></image>
					<input placeholder="账号/买号/商家/订单号" />
				</view>
				<view class="by_benjin">
					<text>本金</text>
					<input />-<input />
				</view>
				<view class="search_btn">查询</view>
			</view>
			<view class="filter_result">
				<image src="../../static/img/no_data.png" class="no_data"></image>
			</view>
		</view>

	
		<!-- 提现账本 -->
		<view class="book_container" v-if="page == 2">
			<view class="table_book">
				<view class="table_title">
					<view>2022</view>
					<view>未到账</view>
					<view>已提现</view>
					<view>本金</view>
				</view>
				<view class="cuttent_mounth">
					<view class="select">
						<image src="../../static/img/table_left_icon.png"></image>
						<text>本月</text>
						<image src="../../static/img/table_right_icon.png"></image>
					</view>
					<view class="red">0.0</view>
					<view>0.0</view>
					<view>0.0</view>
				</view>
				<view class="cuttent_mounth">
					<view class="select">
						<image src="../../static/img/table_left_icon.png"></image>
						<text>今日</text>
						<image src="../../static/img/table_right_icon.png"></image>
					</view>
					<view class="red">0.0</view>
					<view>0.0</view>
					<view>0.0</view>
				</view>
			</view>
		
			<view class="filter_container_page2">
				<uni-data-picker placeholder="全部站点" popup-title="请选择站点" :localdata="zhandian" v-model="zhangdian_value"
					@change="zhangdian_change" @nodeclick="onnodeclick" @popupopened="onpopupopened"
					@popupclosed="onpopupclosed">
				</uni-data-picker>
				<view class="btns">
					<text class="btn_actived">全部</text>
					<text>已到账</text>
					<text>未到账</text>
				</view>
			</view>
		
			<view class="filter_by">
				<view class="by_type">
					<image src="../../static/img/search_icon.png"></image>
					<input placeholder="账号/买号/商家/订单号" />
				</view>
				<view class="by_benjin">
					<text>金额</text>
					<input />-<input />
				</view>
				<view class="search_btn">查询</view>
			</view>
			<view class="filter_result">
				<image src="../../static/img/no_data.png" class="no_data"></image>
			</view>
		</view>
	
   <!-- 记账分析 -->
   <view class="book_container book_container_page3" v-if="page == 3">
   	<view class="page3_top">
      <view class="top_left">
        <image src="../../static/img/table_left_icon.png"></image>
        <text>2022</text>
         <image src="../../static/img/table_right_icon.png"></image>
      </view>
      <view class="top_left">
        <image src="../../static/img/table_left_icon.png"></image>
        <text>5</text>
         <image src="../../static/img/table_right_icon.png"></image>
      </view>
    </view>
    
    <view class="table_container">
      <view class="table">
        <view class="table_title2">总览</view>
        <view class="tr">
          <view>总佣金</view>
          <view>总本金</view>
          <view>总未返</view>
          <view style="border-right: none;">总笔数</view>
        </view>
        <view class="tr">
          <view>￥0.0</view>
          <view>￥0.0</view>
          <view>￥0.0</view>
          <view style="border-right: none;">￥0.0</view>
        </view>
        <view class="tr_end">
          <view>总盈亏<text>¥0</text></view>
          <view>总未提现<text>¥0</text></view>
        </view>
      </view>
      
      <view class="table">
        <view class="table_title2">异常概览</view>
        <view class="tr tr2">
          <view>状态</view>
          <view>数量</view>
          <view>总金额</view>
          <view>其中本金</view>
          <view style="border-right: none;">其中佣金</view>
        </view>
        <view class="tr tr2 tr_last">
          <view>异常</view>
          <view>0</view>
          <view>¥0</view>
           <view>¥0</view>
          <view style="border-right: none;">￥0.0</view>
        </view>
      </view>
      
      <view class="table" style="margin-top: -40px;">
        <view class="table_title2">本佣概览</view>
        <view class="tr tr2">
          <view>类型</view>
          <view>未返笔数</view>
          <view>未返金额</view>
          <view>已返笔数</view>
          <view style="border-right: none;">已返金额</view>
        </view>
        <view class="tr tr2 ">
          <view>佣金</view>
          <view>0</view>
          <view>¥0</view>
           <view>¥0</view>
          <view style="border-right: none;">￥0.0</view>
        </view>
        <view class="tr tr2 tr_last">
          <view>本金</view>
          <view>0</view>
          <view>¥0</view>
           <view>¥0</view>
          <view style="border-right: none;">￥0.0</view>
        </view>
      </view>
      
      <view class="table">
        <view class="table_title2">银行卡资金明细</view>
        <view class="tr">
          <view>收款号</view>
          <view>未到账</view>
          <view>已到账</view>
          <view style="border-right: none;">笔数</view>
        </view>
        <view class="tr tr_last">
          <view>总提现</view>
          <view>￥0.0</view>
          <view>￥0.0</view>
          <view style="border-right: none;">￥0.0</view>
        </view>
      </view>
      
      <view class="table" style="margin-top: -40px;">
        <view class="table_title2">分平台明细</view>
        <view class="tr tr2">
          <view>平台</view>
          <view>未返(本)</view>
          <view>未返(佣)</view>
          <view>盈亏</view>
          <view>提现</view>
          <view style="border-right: none;">余额</view>
        </view>
        <view class="tr tr2 tr_last">
          <view>总提现</view>
          <view>0</view>
          <view>¥0</view>
           <view>¥0</view>
          <view style="border-right: none;">￥0.0</view>
        </view>
      </view>
      
    </view>
   </view>
  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:3,
				zhangdian_value: "全部站点",
				fankuan_value: "返款情况",
				dingdan_value: "订单状态",
				plant_value: "商城",
				shoukuan_value: "收款方式",
				zhandian: [{
						value: 0,
						text: "全部站点"
					},
					{
						value: 1,
						text: "全部站点2"
					},
					{
						value: 2,
						text: "全部站点3"
					},
				],
				fankuan: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "已返"
					},
					{
						value: 2,
						text: "未返"
					},
					{
						value: 3,
						text: "本金未返"
					},
					{
						value: 4,
						text: "佣金未返"
					},
				],
				dingdan: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "正常"
					},
					{
						value: 2,
						text: "异常"
					},
				],
				plant: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "淘宝"
					},
					{
						value: 2,
						text: "京东"
					},
					{
						value: 3,
						text: "抖音"
					},
					{
						value: 4,
						text: "拼多多"
					},
					{
						value: 4,
						text: "阿里巴巴"
					},
				],
				shoukuan: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "平台账户"
					},
				],

			
			}
		},
		methods: {
			zhangdian_change(e) {
				console.log("e:", e);
			},
			fankuan_change(e) {
				console.log("e:", e);
			},
			dingdan_change(e) {
				console.log("e:", e);
			},
			plant_change(e) {
				console.log("e:", e);
			},
			shoukuan_change(e) {
				console.log("e:", e);
			},
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			gojizhang(e){
				console.log("执行了这个方法")
				uni.navigateTo({
					url: '../AccountBook/AccountBook',
					animationType:"slide-in-right",
					"animationDuration": 200
				});
			}
		},
	}
</script>

<style>
	@import "Bookkeeping.css";
</style>
